<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>笔记汇总 | 基于VuePress的静态博客站点</title>
    <meta name="generator" content="VuePress 1.8.2">
    
    <meta name="description" content="Just playing around">
    
    <link rel="preload" href="/assets/css/0.styles.e4d8b86b.css" as="style"><link rel="preload" href="/assets/js/app.e287e05a.js" as="script"><link rel="preload" href="/assets/js/2.4c6c6a2e.js" as="script"><link rel="preload" href="/assets/js/11.7630bd03.js" as="script"><link rel="prefetch" href="/assets/js/10.b9ac3207.js"><link rel="prefetch" href="/assets/js/12.6077b50b.js"><link rel="prefetch" href="/assets/js/13.30691e22.js"><link rel="prefetch" href="/assets/js/3.7985bb7f.js"><link rel="prefetch" href="/assets/js/4.ba3164ba.js"><link rel="prefetch" href="/assets/js/5.75a3592b.js"><link rel="prefetch" href="/assets/js/6.0377ba0c.js"><link rel="prefetch" href="/assets/js/7.e59ee139.js"><link rel="prefetch" href="/assets/js/8.854706af.js"><link rel="prefetch" href="/assets/js/9.617247af.js">
    <link rel="stylesheet" href="/assets/css/0.styles.e4d8b86b.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/" class="home-link router-link-active"><!----> <span class="site-name">基于VuePress的静态博客站点</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/" class="nav-link">
  首页
</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="导航" class="dropdown-title"><span class="title">导航</span> <span class="arrow down"></span></button> <button type="button" aria-label="导航" class="mobile-dropdown-title"><span class="title">导航</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/guide_vue/" class="nav-link router-link-active">
  vue学习笔记
</a></li><li class="dropdown-item"><!----> <a href="/guide_react/" class="nav-link">
  react学习笔记
</a></li><li class="dropdown-item"><!----> <a href="/video/" class="nav-link">
  参考视频
</a></li></ul></div></div><div class="nav-item"><a href="https://www.baidu.com" target="_blank" rel="noopener noreferrer" class="nav-link external">
  链接
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/" class="nav-link">
  首页
</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="导航" class="dropdown-title"><span class="title">导航</span> <span class="arrow down"></span></button> <button type="button" aria-label="导航" class="mobile-dropdown-title"><span class="title">导航</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/guide_vue/" class="nav-link router-link-active">
  vue学习笔记
</a></li><li class="dropdown-item"><!----> <a href="/guide_react/" class="nav-link">
  react学习笔记
</a></li><li class="dropdown-item"><!----> <a href="/video/" class="nav-link">
  参考视频
</a></li></ul></div></div><div class="nav-item"><a href="https://www.baidu.com" target="_blank" rel="noopener noreferrer" class="nav-link external">
  链接
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><a href="/guide_vue/" aria-current="page" class="sidebar-link">导航首页</a></li><li><a href="/guide_vue/vue.html" aria-current="page" class="active sidebar-link">笔记汇总</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/guide_vue/vue.html#_1-vue的核心是什么" class="sidebar-link">1.Vue的核心是什么</a></li><li class="sidebar-sub-header"><a href="/guide_vue/vue.html#_2-请简述你对vue的理解" class="sidebar-link">2.请简述你对vue的理解</a></li><li class="sidebar-sub-header"><a href="/guide_vue/vue.html#_3-请简述vue的单向数据流" class="sidebar-link">3.请简述vue的单向数据流</a></li></ul></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h2 id="_1-vue的核心是什么"><a href="#_1-vue的核心是什么" class="header-anchor">#</a> 1.Vue的核心是什么</h2> <div class="language- extra-class"><pre><code>### 请简述你对vue的理解
</code></pre></div><p>Vue是一套构建用户界面的渐进式自底向上增量开发的MVVM框架，vue的核心只关注视图层，</p> <p>核心思想：</p> <p>数据驱动（视图的内容随着数据的改变而改变）</p> <p>组件化（可以增加代码的复用性，可维护性，可测试性，提高开发效率，方便重复使用，体现了高内聚低耦合）</p> <h2 id="_2-请简述你对vue的理解"><a href="#_2-请简述你对vue的理解" class="header-anchor">#</a> 2.请简述你对vue的理解</h2> <p>Vue是一套构建用户界面的渐进式的自底向上增量开发的MVVM框架，核心是关注视图层，vue的核心是为了解决数据的绑定问题，为了开发大型单页面应用和组件化，所以vue的核心思想是数据驱动和组件化，这里也说一下MVVM思想，MVVM思想是 模型  视图  vm是v和m连接的桥梁，当模型层数据修改时，VM层会检测到，并通知视图层进行相应修改</p> <h2 id="_3-请简述vue的单向数据流"><a href="#_3-请简述vue的单向数据流" class="header-anchor">#</a> 3.请简述vue的单向数据流</h2> <div class="language-js extra-class"><pre class="language-js"><code>所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外改变父级组件的状态，从而导致你的应用的数据流向难以理解。

额外的，每次父级组件发生更新时，子组件中所有的 prop 都将会刷新为最新的值。

这意味着你<span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">不应该在一个子组件内部改变 prop</span><span class="token template-punctuation string">`</span></span>。如果你这样做了，Vue 会在浏览器的控制台中发出警告。

父级prop的更新会向下流动到子组件中，每次父组件发生更新，子组件所有的prop都会刷新为最新的值
# 数据从父组件传递给子组件，只能单向绑定，子组件内部不能直接修改父组件传递过来的数据，（可以使用data和computed解决）

## <span class="token number">1.</span>这个 prop 用来传递一个初始值；这个子组件接下来希望将其作为一个本地的 prop 数据来使用。在这种情况下，最好定义一个本地的 data 属性并将这个 prop 用作其初始值：
props<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'initialCounter'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token function-variable function">data</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> <span class="token punctuation">{</span>
    counter<span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>initialCounter
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
## <span class="token number">2.</span>这个 prop 以一种原始的值传入且需要进行转换。在这种情况下，最好使用这个 prop 的值来定义一个计算属性：
props<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'size'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
computed<span class="token operator">:</span> <span class="token punctuation">{</span>
  <span class="token function-variable function">normalizedSize</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span>size<span class="token punctuation">.</span><span class="token function">trim</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toLowerCase</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
## 注意在 JavaScript 中对象和数组是通过引用传入的，所以对于一个数组或对象类型的 prop 来说，在子组件中改变变更这个对象或数组本身将会影响到父组件的状态。
</code></pre></div></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
      ←
      <a href="/guide_vue/" class="prev router-link-active">
        导航首页
      </a></span> <!----></p></div> </main></div><div class="global-ui"></div></div>
    <script src="/assets/js/app.e287e05a.js" defer></script><script src="/assets/js/2.4c6c6a2e.js" defer></script><script src="/assets/js/11.7630bd03.js" defer></script>
  </body>
</html>
